<template>
  <div class="ReportDetail">
    <a-tab-pane key="2" title="全景雷达" class="atabpane">
          <div class="userinfo-content-item">
            <div class="userinfo-content-title">使用情况</div>
            <div class="base-info-row">
              <a-row :gutter="[20,20]" class="base-info-row-item">
                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="speed" sub-title="贷款行为分" :title="data?.loan_behavior_score"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="clock" sub-title="贷款信用时长" :title="data?.credit_loan_duration"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="praise" sub-title="第一次履约距今天数" 
                   :title="data?.last_performance_days"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="dollars" sub-title="已结清笔数" :title="data?.loan_settled_orders"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="card" sub-title="正常还款占总贷款比例" 
                  :title="data?.normal_repayment_ratio"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <usageCard type="cash" sub-title="最近放款时间" 
                  :title="data?.last_loan_disbursement_time"/>
                </a-col>
              </a-row> 
            </div>
          </div>

          <div class="userinfo-content-item">
            <div class="userinfo-content-title">逾期情况</div>
            <div class="base-info-row">

              <a-row :gutter="[20,20]" class="base-info-row-item">
                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="gray" sub-title="近6月M0+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m0_6m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="blueBlack" sub-title="近12月M0+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m0_12m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="blue" sub-title="近24月M0+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m0_24m" />
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="pink" sub-title="近6月M1+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m1_6m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="gray" sub-title="近12月M1+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m1_12m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="blueBlack" sub-title="近24月M1+逾期贷款笔数" 
                  :title="data?.overdue_loan_count_m1_24m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="blue" sub-title="近6月累计逾期金额" 
                  :title="data?.cumulative_overdue_amount_6m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="blueBlack" sub-title="近12月累计逾期金额" 
                  :title="data?.cumulative_overdue_amount_12m"/>
                </a-col>

                <a-col :xs="2" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
                  <overdueCard type="gray" sub-title="近24月累计逾期金额" 
                   :title="data?.cumulative_overdue_amount_24m"/>
                </a-col>
              </a-row>    

            </div>
          </div>

          <div class="userinfo-content-item">
            <div class="userinfo-content-title">近12个月贷款行为</div>
            <div class="base-info-row">
              <a-table
               :columns="columnOne" 
               :pagination="false"
               :data="dataOneList" />
            </div>
          </div>

          <div class="userinfo-content-item">
            <div class="userinfo-content-title">近12个月贷款行为</div>
            <div class="base-info-row">
              <a-table
               :columns="columnTwo" 
               :pagination="false"
               :data="dataTwoList" />
            </div>
          </div> 

        </a-tab-pane>
  </div>
</template>

<script setup lang="ts">

import { ClueBehaviorReportDetail } from '@/api/clues'
import { ref , reactive, PropType, watch, computed } from 'vue'
import usageCard from '@/views/clues/components/usage-card.vue'
import overdueCard from '@/views/clues/components/overdue-card.vue'
import { useAppStore } from '@/store';
import { isNull, isUndefined } from 'lodash';
import { TableColumnData } from '@arco-design/web-vue';
const appStore = useAppStore()

let props = defineProps({
    data: {
      type: Object as PropType<ClueBehaviorReportDetail>,
      default: () => null
    }
})

let dataOneList = ref([]);
let dataTwoList = ref([])

watch(()=>props.data,(value)=>{

  dataOneList.value = [{
    loansNum: '贷款笔数',
    loan_amount_1k_3k_12_months: value?.loan_amount_1k_3k_12_months,
    loan_amount_1k_or_below_12_months: value?.loan_amount_1k_or_below_12_months,
    loan_amount_3k_10k_12_months: value?.loan_amount_3k_10k_12_months,
  }]

  dataTwoList.value = [
    {
      behavior_time: '1个月',
      loan_count_month: value?.loan_count_1_month,
      loan_amount_month: value?.loan_amount_1_month,
      loan_org_count_month: value?.loan_org_count_1_month,
      failed_deduction_count: value?.failed_deduction_count_1m,
      loan_performance_amount: value?.loan_performance_amount_1m,
      loan_performance_count: value?.loan_performance_count_1m,
    },
    {
      behavior_time: '3个月',
      loan_count_month: value?.loan_count_3_months,
      loan_amount_month: value?.loan_amount_3_months,
      loan_org_count_month: value?.loan_org_count_3_months,
      failed_deduction_count: value?.failed_deduction_count_3m,
      loan_performance_amount: value?.loan_performance_amount_3m,
      loan_performance_count: value?.loan_performance_count_3m,
    },
    {
      behavior_time: '6个月',
      loan_count_month: value?.loan_count_6_months,
      loan_amount_month: value?.loan_amount_6_months,
      loan_org_count_month: value?.loan_org_count_6_months,
      failed_deduction_count: value?.failed_deduction_count_6m,
      loan_performance_amount: value?.loan_performance_amount_6m,
      loan_performance_count: value?.loan_performance_count_6m,
    },
    {
      behavior_time: '12个月',
      loan_count_month: value?.loan_count_12_months,
      loan_amount_month: value?.loan_amount_12_months,
      loan_org_count_month: value?.loan_org_count_12_months,
      failed_deduction_count: value?.failed_deduction_count_12m,
      loan_performance_amount: value?.loan_performance_amount_12m,
      loan_performance_count: value?.loan_performance_count_12m,
    },
    {
      behavior_time: '24个月',  /// 行为时间
      loan_count_month: value?.loan_count_24_months,     // 贷款笔数
      loan_amount_month: value?.loan_amount_24_months,   //贷款总额
      loan_org_count_month: value?.loan_org_count_24_months, // 贷款机构数
      failed_deduction_count: value?.failed_deduction_count_24m, ///失败扣款笔数
      loan_performance_amount: value?.loan_performance_amount_24m, ///履约贷款总金额
      loan_performance_count: value?.loan_performance_count_24m, /// 履约贷款次数
    }
 ];


},{
  deep:true,
  immediate:true,
});

const columnOne = ref<TableColumnData[]>([
  {
    title: '贷款金额',
    align: 'center',
    dataIndex: 'loansNum',
  },
  {
    title: '1K以下',
    align: 'center',
    dataIndex: 'loan_amount_1k_or_below_12_months',
  },
  {
    title: '1K至3K',
    align: 'center',
    dataIndex: 'loan_amount_1k_3k_12_months',
  },
  {
    title: '3K至10K',
    align: 'center',
    dataIndex: 'loan_amount_3k_10k_12_months',
  }
]);


const columnTwo = ref<TableColumnData[]>([
  {
    title: '行为时间',
    dataIndex: 'behavior_time',
    align: 'center',
  },
  {
    title: '贷款笔数',
    dataIndex: 'loan_count_month',
    align: 'center'
  },
  {
    title: '贷款金额',
    align: 'center',
    dataIndex: 'loan_amount_month',
    
  },
  {
    title: '贷款机构',
    dataIndex: 'loan_org_count_month',
    align: 'center',
  },
  {
    title: '失败扣款笔数',
    dataIndex: 'failed_deduction_count',
    align: 'center',
  },
  {
    title: '履约贷款总金额',
    dataIndex: 'loan_performance_amount',
    align: 'center',
  },
  {
    title: '履约贷款次数',
    dataIndex: 'loan_performance_count',
    align: 'center',
  },
]);

</script>

<style scoped lang='less'>
  .userinfo-card,
  .userinfo-content{
    margin-bottom: 20px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
    overflow: auto;
  }

  .user-avatar-info{
      background: #409EFF;
      border-radius: 10px;
      padding: 18px 20px;
    }

    .user-info-mate{
      display: inline-block;
      color: #F4F4F4;
      margin-left: 19px;
      .user-name{
        font-weight: bold;
        font-size: 24px;
      }
      .user-age,
      .user-sex{
        font-weight: 600;
        font-size: 16px;
      }
    }

    .atext-content{
      font-size: 14px;
      color: #333333;
    }

    .user-info-item-second{
      margin-top: 20px;
    }

    .userinfo-content-title{ 
      font-weight: bold;
      font-size: 16px;
      color: #333333;
    }

    .userinfo-content-item{
       margin-top: 16px;
       margin-bottom: 40px;
    }

    .base-info-row{
      margin-top: 27px;
    }

    .atabpane{
      padding: 0px 10px 52px 10px;
    }

    .model-title-text{
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      padding-left: 17px;
      border-left: 2px solid #409EFF;
    }


    :deep(.arco-table-container){
      .arco-table-th {
        background-color: #F5F5F5;
      }
      .arco-table-th-title{
        color: #333333 !important;
        font-weight: bold;
      }
    }
            
</style>